<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<!-- import CSS -->
	<link rel="stylesheet" href="index.css">
</head>

<body>
	<div id="mask" style="width: 100%;height: 100%;position: absolute;background-color: white;"></div>
	<div id="app" style="height: 100%;">
		<el-row style="height: 100%;">
			<el-col :span="1">&nbsp;</el-col>
			<el-col :span="22">
				<br>
				<el-tabs v-model="currentTab"  @tab-click="tabChange">
					<el-tab-pane label="设备" name="device">
						<el-button type="primary" size="mini"  @click="device_show()">查询</el-button>
						<el-table id="device-table" :height="device.tableHeight" :data="device.tableDataList" style="width: 100%">
							<el-table-column label="序号" prop="index" width="55" >
							</el-table-column>
							<el-table-column label="设备" prop="deviceName" >
							</el-table-column>
							<el-table-column label="状态" prop="state" >
								<template slot-scope="scope">
									<el-tag v-if="scope.row.state==0" type="danger" disable-transitions>删除</el-tag>
									<el-tag v-else-if="scope.row.state==1" type="primary" disable-transitions>未连接</el-tag>
									<el-tag v-else-if="scope.row.state==2" type="info" disable-transitions>连接中</el-tag>
									<el-tag v-else-if="scope.row.state==3" type="success" disable-transitions>在线</el-tag>
									<el-tag v-else-if="scope.row.state==4" type="warning" disable-transitions>掉线</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="开关状态" prop="state" >
								<template slot-scope="scope">
									<el-tag v-if="scope.row.recv==1" type="success" disable-transitions>正常</el-tag>
									<el-tag v-else-if="scope.row.recv==2" type="warning" disable-transitions>忙碌</el-tag>
									<el-tag v-else-if="scope.row.recv==3" type="danger" disable-transitions>关闭</el-tag>
								</template>
							</el-table-column>
							<el-table-column width="200" label="开关操作" prop="state" >
								<template slot-scope="scope">
									<el-button-group>
										<el-button :disabled="scope.row.recv==1" @click="device_recv_change(scope.row.deviceName,1)" round size="mini" type="primary" >正常</el-button>
										<el-tooltip class="item" effect="dark" content="忙碌中不能接受新任务" placement="top">
											<el-button :disabled="scope.row.recv==2" @click="device_recv_change(scope.row.deviceName,2)" round size="mini" type="warning" >忙碌</el-button>
										</el-tooltip>
										<el-tooltip class="item" effect="dark" content="停止当前任务且不接受新任务" placement="top">
											<el-button :disabled="scope.row.recv==3" @click="device_recv_change(scope.row.deviceName,3)" round size="mini" type="danger" >关闭</el-button>
										</el-tooltip>
									</el-button-group>
								</template>
							</el-table-column>
							<el-table-column label="任务数量" prop="taskNum" >
							</el-table-column>
						</el-table>
					</el-tab-pane>




					<el-tab-pane label="任务" name="task">
						<el-form :inline="true" size="mini" class="demo-form-inline">
							<el-form-item label="设备">
								<el-radio-group v-model="task.deviceQuery">
									<template v-for="item in task.deviceOptionList">
										<el-radio :label="item">{{item}}</el-radio>
									</template>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="历史">
								<el-switch v-model="task.isHistory" active-text="" inactive-text="">
								</el-switch>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="task.page.num=1;task_show()">查询</el-button>
							</el-form-item>
						</el-form>
						<el-table id="task-table" :height="task.tableHeight" :data="task.tableDataList" style="width: 100%">
							<el-table-column label="序号" prop="index" width="55" >
							</el-table-column>
							<el-table-column label="状态" prop="state" >
								<template slot-scope="scope">
									<el-tag v-if="scope.row.state==0" type="danger" disable-transitions>删除</el-tag>
									<el-tag v-else-if="scope.row.state==1" type="primary" disable-transitions>运行</el-tag>
									<el-tag v-else-if="scope.row.state==2" type="info" disable-transitions>挂起</el-tag>
									<el-tag v-else-if="scope.row.state==3" type="success" disable-transitions>完成</el-tag>
									<el-tag v-else-if="scope.row.state==4" type="warning" disable-transitions>失败</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="状态描述" prop="stateText" >
							</el-table-column>
							<el-table-column label="步骤" prop="step" >
							</el-table-column>
							<el-table-column label="步骤描述" prop="stepText" >
							</el-table-column>
							<el-table-column label="历史参数" prop="infoContents" >
							</el-table-column>
							<el-table-column label="创建时间" prop="createTime" >
							</el-table-column>
						</el-table>
						<el-row class="ss-row" type="flex" >
							<el-pagination background
							  layout="slot,total, sizes, prev, pager, next, jumper"
							  :total="task.page.total"
							  :current-page.sync="task.page.num"
							  :page-sizes="[20, 50, 100, 500]"
							  :page-size.sync="task.page.size"
							  @size-change="task_show"
							  @current-change="task_show"
							>
							  <el-button icon="el-icon-refresh" size="mini" @click="task_show"></el-button>
							</el-pagination>
						  </el-row>
					</el-tab-pane>





					<el-tab-pane label="资料" name="info">
						<el-form :inline="true" size="mini" class="demo-form-inline">
							<el-form-item label="资料类型">
								<el-radio-group v-model="info.typeQuery">
									<template v-for="item in info.typeOptionList">
										<el-radio :label="item">{{item}}</el-radio>
									</template>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="历史">
								<el-switch v-model="info.isHistory" active-text="" inactive-text="">
								</el-switch>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="info.page.num=1;info_show()">查询</el-button>
							</el-form-item>
						</el-form>
						<el-button type="success" size="mini"  @click="info.addContents='';info.addVisible = true">新增</el-button>
						<el-dialog title="请输入多行资料" :visible.sync="info.addVisible" width="400" >
							<el-radio-group v-model="info.typeQuery">
								<template v-for="item in info.typeOptionList">
									<el-radio :label="item">{{item}}</el-radio>
								</template>
							</el-radio-group>
							<br/><br/>
							<el-input type="textarea" :rows="10" placeholder="行内格式: 小明,20,abc" v-model="info.addContents">
							</el-input>
							<span slot="footer" class="dialog-footer">
								<el-button size="mini" @click="info.addVisible = false">取 消</el-button>
								<el-button size="mini" type="primary" @click="info_save();info.addVisible = false;">确 定</el-button>
							</span>
						</el-dialog>
						
						<el-table id="info-table" :height="info.tableHeight" :data="info.tableDataList" style="width: 100%">
							<el-table-column label="序号" prop="index" width="55" >
							</el-table-column>
							<el-table-column label="内容" prop="content" >
							</el-table-column>
						</el-table>
						<el-row class="ss-row" type="flex" >
							<el-pagination background
							  layout="slot,total, sizes, prev, pager, next, jumper"
							  :total="info.page.total"
							  :current-page.sync="info.page.num"
							  :page-sizes="[20, 50, 100, 500]"
							  :page-size.sync="info.page.size"
							  @size-change="info_show"
							  @current-change="info_show"
							>
							  <el-button icon="el-icon-refresh" size="mini" @click="info_show"></el-button>
							</el-pagination>
						  </el-row>
					</el-tab-pane>
				</el-tabs>
			</el-col>
			<el-col :span="1">&nbsp;</el-col>
		</el-row>
	</div>
</body>
<script src="jquery.min.js"></script>
<script src="socket.io.js"></script>
<!-- import Vue before Element -->
<script src="vue.js"></script>
<!-- import JavaScript -->
<script src="index.js"></script>
<script>
	new Vue({
		el: '#app',
		data: function () {
			return {
				currentTab: 'device',
				device:{
					tableHeight:200,
					tableDataList:[]
				},
				task: {
					tableHeight:200,
					deviceOptionList:[],
					deviceQuery: "",
					isHistory:false,
					tableDataList:[],
					page:{
						total:0,
						num:1,
						size:20
					}
				},
				info: {
					tableHeight:200,
					typeOptionList:[],
					typeQuery: "",
					isHistory:false,
					tableDataList:[],
					addVisible:false,
					addContents:"",
					page:{
						total:0,
						num:1,
						size:20
					}
				}
			}
		},
		mounted() {
			var self = this;
			self.info_findTypeList()
			self.tabChange({name:self.currentTab});
			self. ws_init();

			document.getElementById("mask").style.display = 'none';

			window.onresize = () => {
				return (() => {
					self.tabChange({name:self.currentTab});
				})()
			}
		},
		methods: {
			ws_init(){
				let self = this;
				namespace = '/ws';
				var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
				socket.on('device', function(res) {
					if(self.currentTab == 'device'){
						self.device_show()
					}else if(self.currentTab == 'task'){
						self.task_findDeviceList()
					}
				});
				socket.on('task', function(res) {
					if(self.currentTab == 'device'){
						self.device_show()
					}else if(self.currentTab == 'task'){
						self.task_findDeviceList()
					}
				});
				socket.on('info', function(res) {
					if(self.currentTab == 'info'){
						self.info_show()
					}
				});
			},
			//### common
			alertError(msg) {
				let self = this;
				self.$alert(msg, '错误', {
					confirmButtonText: '确定',
					//   callback: action => {
					// 	  self.info_show();
					//   }
				});
			},
			tabChange(tab, event) {
				let self = this;
				if(tab.name == "device"){
					this.device_show()
					Vue.nextTick(function(){
						self.device.tableHeight = window.innerHeight - $('#device-table').offset().top - 50
					})
				}else if (tab.name == "task") {
					this.task_findDeviceList()
					Vue.nextTick(function(){
						self.task.tableHeight = window.innerHeight - $('#task-table').offset().top - 50
					})
				} else if (tab.name == "info") {
					this.info_show()
					Vue.nextTick(function(){
						self.info.tableHeight = window.innerHeight - $('#info-table').offset().top - 50
					})
				}
			},
			//### device
			device_show(){
				let self = this;
				$.get("/device/findListDevice", function (items) {
					for(let index=0;index< items.length;index++){
						let row = items[index];
						row.index = index;
					}
					self.device.tableDataList = items
				}).fail(function (data) {
					self.alertError(data)
				});
			},
			device_recv_change(deviceName,recv){
				let self = this;
				$.post("/device/changeRecv",{
					"deviceName":deviceName,
					"recv":recv
				}, function (items) {
					self.device_show()
				}).fail(function (data) {
					self.alertError(data)
				});
			},
			//### task
			task_findDeviceList() {
				let self = this;
				$.get("/device/findListDeviceName", function (res) {
					self.task.deviceOptionList=res
					self.task_show()
				}).fail(function (data) {
					self.alertError(data)
				});
			},
			task_show() {
				let self = this;
				if(self.task.deviceQuery==""){
					self.task.deviceQuery = self.task.deviceOptionList[0]
				}
				if(self.task.deviceQuery==null){
					self.$message({
						message: '请选择设备',
						type: 'warning'
					});
					return
				}
				$.get("/task/findPage", {
					"deviceName":self.task.deviceQuery,
					"isHistory":self.task.isHistory? 1:0,
					"pageSize":self.task.page.size,
					"pageNum":self.task.page.num
				},function (res) {
					for(let index=0;index< res.items.length;index++){
						let row = res.items[index];
						row.index = ( (self.task.page.num-1) * self.task.page.size)+index+1;
					}
					self.task.tableDataList = res.items
					self.task.page.total = res.total
				}).fail(function (data) {
					self.alertError(data)
				});
			},
			//### info
			info_findTypeList() {
				let self = this;
				$.get("/info/findTypeList", function (res) {
					self.info.typeOptionList=res
					self.info_show()
				}).fail(function (data) {
					self.alertError(data)
				});
			},
			info_show() {
				let self = this;
				if(self.info.typeQuery==""){
					self.info.typeQuery = self.info.typeOptionList[0]
				}
				if(self.info.typeQuery==null){
					self.$message({
						message: '请选择类型',
						type: 'warning'
					});
					return
				}
				$.get("/info/findPage", {
					"type":self.info.typeQuery,
					"isHistory":self.info.isHistory? 1:0,
					"pageSize":self.info.page.size,
					"pageNum":self.info.page.num
				},function (res) {
					for(let index=0;index< res.items.length;index++){
						let row = res.items[index];
						row.index = ( (self.info.page.num-1) * self.info.page.size)+index+1;
					}
					self.info.tableDataList = res.items
					self.info.page.total = res.total
				}).fail(function (data) {
					self.alertError(data)
				});
			},
			info_save() {
				let self = this;
				if(self.info.typeQuery==""){
					self.info.typeQuery = self.info.typeOptionList[0]
				}
				if(self.info.typeQuery==null){
					self.alertError("请选择类型")
					return
				}
				$.post("/info/saves", {
					"type": self.info.typeQuery,
					"contents": self.info.addContents
				}, function (res) {
					self.info_show()
				}).fail(function (data) {
					self.alertError(data)
				});
			},
		}
	})
</script>
<style>
	[v-cloak] {
		display: none !important;
	}
	/* html {
		background-color: red;
	}
	body{
		background-color: blue;
	} */
	html,body {
		height: 100%;
		width: 100%;
		margin: 0px;
		padding: 0px;
		font-family: "Microsoft Yahei";
	}

	.item-l {
		margin-left: 5px;
		margin-right: 5px;
	}

	/* #device-table{
		height: calc(100vh - var(--device-table-top));
	}

	#task-table{
		height: calc(100vh - var(--task-table-top));
	}

	#info-table{
		height: calc(100vh - var(--info-table-top));
	} */

</style>

</html>